<template>
  <div class="invite_link_page">
    <div class="table_box">
      <div class="invite_company_views">
        <div class="left">
          <div class="chart" ref="chart"></div>
          <div class="invite_numbers">
            <div>
              发出邀请：<span class="num">{{ viewsObj.emitCount || 0 }}</span><span class="unit">家</span>
            </div>
            <div>
              已有注册：<span class="num">{{ viewsObj.registerCount || 0 }}</span><span class="unit">家</span>
            </div>
          </div>
        </div>
        <div class="line"></div>
        <div class="right">
          <div class="title">邀请企业入驻</div>
          <div class="desc">
            请复制您的专属邀请链接，分享给您的好友，邀请他入驻平台。
          </div>
          <div class="copy_invite_link">
            <el-input class="copy_text" :disabled="true" v-model="viewsObj.url"></el-input>
            <copy-to-clipboard class="clipboard" :text="viewsObj.url" @copy="handleCopy">
              <el-button type="primary" class="copy_btn">复制</el-button>
            </copy-to-clipboard>
          </div>
        </div>
      </div>
      <div class="title">
        <i class="icon"></i>
        最新邀请信息
      </div>
      <el-table :data="tableData" v-loading="loading">
        <el-table-column
          v-for="item in columns"
          :key="item.label"
          v-bind="item"
        >
        </el-table-column>
      </el-table>
      <Pagination
        :hidden="pagination.total === 0"
        :total="pagination.total"
        :page-size="pagination.pageSize"
        :current-page="pagination.pageNum"
        :limit="10"
        @pagination="paginationChange"
      />
    </div>
  </div>
</template>

<script>
import { inviteViews, inviteList } from '@/api/companyManage'
import CopyToClipboard from 'vue-copy-to-clipboard'
import * as echarts from 'echarts/core';
import { PieChart } from 'echarts/charts';
import { LabelLayout } from 'echarts/features';
import { SVGRenderer } from 'echarts/renderers';
import Pagination from '@/components/Pagination'

echarts.use([PieChart, SVGRenderer, LabelLayout]);

export default {
  components: {
    CopyToClipboard,
    Pagination,
  },
  data() {
    return {
      viewsObj: {},
      columns: [],
      tableData: [],
      loading: false,
      pagination: {
        total: 0,
        pageSize: 10,
        pageNum: 1,
      },
    };
  },
  created() {
    this.columns = [
      {
        type: 'index',
        label: '序号'
      },
      {
        prop: 'userName',
        label: '被邀企业账号'
      },
      {
        prop: 'beEnterpriseName',
        label: '被邀企业'
      },
      {
        prop: 'createTime',
        label: '邀请日期'
      },
      {
        prop: 'authenticate',
        label: '是否认证',
        formatter: (row, column, cellValue, index) => {
          // 是否认证 状态 0：否 1：是
          if (cellValue === '0') {
            return '否'
          } else {
            return '是'
          }
        }
      },
      {
        prop: 'authenticateTime',
        label: '注册日期'
      },
      {
        prop: 'status',
        label: '企业状态',
        formatter: (row, column, cellValue, index) => {
          // 状态 0：未认证 1：等待审核 2：已认证 3：认证失败
          switch (cellValue) {
            case '0':
              return '未认证'
            case '1':
              return '等待审核'
            case '2':
              return '已认证'
            case '3':
              return '认证失败'
          }
        }
      }
    ]
  },
  mounted() {
    this.getInviteViews()
    this.getInviteList()
  },
  methods: {
    getInviteViews() {
      inviteViews().then((res) => {
        this.viewsObj = res.data
        this.renderPieChart()
      })
    },
    renderPieChart() {
      let chartDom = this.$refs.chart
      echarts.init(chartDom).setOption({
        color: ['#0058FF', '#D8E0F0'],
        series: [
          {
            type: 'pie',
            radius: ['50%', '90%'],
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 18,
                fontWeight: 'bold'
              }
            },
            data: [
              {
                value: this.viewsObj.emitCount,
                name: `发出邀请${this.viewsObj.emitCount > 0 ? this.viewsObj.emitCount/this.viewsObj.totalCount * 100 : 0}%`
              },
              {
                value: this.viewsObj.registerCount,
                name: `已有注册${this.viewsObj.registerCount > 0 ? this.viewsObj.registerCount/this.viewsObj.totalCount * 100 : 0}%`
              },
            ]
          }
        ]
      })
    },
    getInviteList() {
      this.loading = true
      inviteList({
        pageNum: this.pagination.pageNum,
        pageSize: this.pagination.pageSize
      }).then((res) => {
        this.loading = false
        this.tableData = res.rows
        this.pagination.total = res.total
      }).catch(() => {
        this.loading = false
      })
    },
    paginationChange({ page: pageNum, limit: pageSize }) {
      this.pagination.pageNum = pageNum
      this.pagination.pageSize = pageSize
      this.getInviteList()
    },
    handleCopy (result) {
      if (result) {
        this.$message({
          type: 'success',
          message: '复制成功',
        })
        console.log('onCopy', result)
      }
    }
  },
};
</script>

<style lang="scss" scoped>
@import "@/assets/styles/variables.scss";

.invite_link_page {
  .table_box {
    padding: 16px 16px 24px;
    background: url("../../../assets/companyManage/bg.png") no-repeat 0 0;
    background-size: 100% auto;
    box-shadow: 0 1px 2px 0 rgba(1, 24, 70, 0.09);
    border-radius: 6px;
    background-color: #fff;
    margin-bottom: 16px;
    &:last-child {
      margin-bottom: 0;
    }
    .invite_company_views {
      padding-top: 40px;
      padding-left: 60px;
      padding-bottom: 80px;
      display: flex;
      align-items: center;
      .left {
        display: flex;
        align-items: center;
        .chart {
          width: 160px;
          height: 160px;
          margin-right: 40px;
        }
        .invite_numbers {
          color: #777;
          font-size: 18px;
          .num {
            display: inline-block;
            color: $theme;
            width: 48px;
            text-align: center;
            margin-right: 4px;
          }
          .unit {
            color: #333;
          }
        }
      }
      .line {
        width: 1px;
        height: 71px;
        background-color: #bfd5ff;
        margin: 0 48px;
      }
      .right {
        flex: 1 1 auto;
        .title {
          color: $theme;
          font-size: 28px;
          font-weight: 500;
          height: 28px;
          line-height: 28px;
          margin-bottom: 20px;
        }
        .desc {
          color: #777;
          font-size: 16px;
          margin-bottom: 12px;
        }
        .copy_invite_link {
          display: flex;
          align-items: center;
          width: 80%;
          font-size: 16px;
          ::v-deep .copy_text.el-input--medium .el-input__inner {
            height: 40px;
            color: #333;
            font-size: 14px;
          }
          .copy_btn {
            width: 88px;
            height: 40px;
            margin-left: 20px;
          }
        }
      }
    }
    .title {
      color: #333;
      font-size: 16px;
      font-weight: 600;
      display: flex;
      align-items: center;
      margin-bottom: 16px;
      .icon {
        display: block;
        width: 3px;
        height: 16px;
        background-color: $theme;
        margin-right: 5px;
      }
    }
  }
}
</style>
